<template>
  <div class="content">
    <div class="search-wrap">
      <var-select variant="outlined" size="small" placeholder="请选择要解说的赛季" v-model="event" @change="getList">
        <var-option v-for="item in events" :label="item?.name" />
      </var-select>
    </div>
    <div class="main-wrap" ref="scrollBar">
      <var-skeleton rows="10" :loading="skyLoading">
        <div class="box" v-ripple v-if="list.length !== 0" v-for="item in list">
          <div class="left-item">
            <div class="ava-box">
              <span>{{ item.tag || "无标签" }}</span>
            </div>
            <div class="selected-box">
              <var-chip v-if="handleDis(item.commentary)" color="rgb(236, 54, 81)" plain block size="small">
                <p>已满</p>
              </var-chip>
              <var-chip v-else color="rgb(48, 228, 123)" plain size="small">未满</var-chip>
            </div>
          </div>
          <div class="right-item">
            <var-ellipsis style="max-width: 200px">
              <h4>{{ item.team1_name }} vs {{ item.team2_name }}</h4>
            </var-ellipsis>
            <p class="eclipse">
              解说1:{{ handleCom(item.commentary)[0] || "暂无解说报名" }}
            </p>
            <p class="eclipse">
              解说2:{{ handleCom(item.commentary)[1] || "暂无解说报名" }}
            </p>
            <div class="bottom-wrap">
              <p class="time-wrap">{{ handleTime(item.opentime) }}</p>
              <var-button type="success" size="small" :disabled="handleDis(item.commentary)"
                @click="handleEnroll(item.id)">点击报名</var-button>
            </div>
          </div>
        </div>
        <div v-else>
          <p class="noData">暂无赛程，请联系主办方</p>
        </div>
        <div ref="pageIcon" class="page-wrap">
          <var-button v-if="!isLoadingEnd" type="success" size="small" @click="loadMore">加载更多</var-button>
          <p v-else>数据已加载完毕...</p>
        </div>
      </var-skeleton>
      <var-popup :default-style="false" v-model:show="success">
        <var-result class="result" type="success" title="成功！" description="成功选择了该场比赛的解说！">
          <template #footer>
            <var-button type="success" @click="success = false">知道了</var-button>
          </template>
        </var-result>
      </var-popup>
      <var-overlay v-model:show="overlayShow">
        <div class="overlay-content">
          <li></li>
          <li></li>
          <li></li>
        </div>
      </var-overlay>
    </div>
    <button class="move-top-btn" @click="moveTop">▲</button>
  </div>
</template>

<script setup lang="ts">
import { isJSON } from "@/utils/index";


interface listQuery {
  page?: number;
  limit?: number;
}
let events = reactive<any[]>([]);
const event = ref("第五届ASG众创赛");
const skyLoading = ref(false);
const overlayShow = ref(false);
const isLoadingEnd = ref(false);
const pageIcon: any = ref()
const scrollBar: any = ref();

const listQuery: any = reactive<listQuery>({
  page: 1,
  limit: 6,
});
onMounted(() => {

  getAllEvents()
    .then((res) => {
      res.data.forEach((item: any) => {
        events.push(item);
        getList(event.value);
        Snackbar.warning("请确认是否开启积分模式，若未开启请前往个人中心，否则选班不加积分！")
      });
    })
    .catch((err) => {
      console.log(err);
    });
});

const list = reactive<any[]>([]);
const getList = (value: string) => {
  isLoadingEnd.value = false;
  event.value = value;
  skyLoading.value = true;
  listQuery.page = 1;
  getAllGame(listQuery.page, listQuery.limit, event.value)
    .then((res) => {
      list.length = 0;
      res.data.forEach((item: any) => {
        list.push(item);
      });
      if (list.length < 6) {
        isLoadingEnd.value = true;
      }
      skyLoading.value = false;
    })
    .catch(() => {
      skyLoading.value = false;
    });
};
// 加载更多
const loadMore = () => {
  listQuery.page = Math.floor(list.length / 6) + 1;
  getAllGame(listQuery.page, listQuery.limit, event.value)
    .then((res) => {
      if (res.data.length < 6) {
        isLoadingEnd.value = true;
      }
      res.data.forEach((item: any) => {
        list.push(item);
      });
      console.log("##", pageIcon);
      nextTick(() => {
        pageIcon.value.scrollIntoView({
          behavior: "smooth",
        });
      })
    })
    .catch(() => {});
}
// 上移函数
const moveTop = () => {
  scrollBar.value.scrollTo({
  top: 0,
  left: 0,
  behavior: "smooth",
})
}
// 解说处理函数
const handleCom = (value: string) => {
  interface O {
    id?: string | number;
    chinaname?: string;
  }
  if (isJSON(value)) {
    const transformArr: Array<O> = JSON.parse(value);
    return transformArr.map((v) => v.chinaname);
  } else {
    return [];
  }
};
// 按钮禁用逻辑
const handleDis = (value: string) => {
  let arr = JSON.parse(value);
  if (arr.length < 2) {
    return false;
  } else {
    return true;
  }
}
const handleTime = (value: string) => {
  const month = value.slice(5, 7);
  const day = value.slice(8, 10);
  const time = value.slice(11, 19);
  return month + "/" + day + " " + time;
};
// 处理是否确认选择
const bizId = ref("");
const success = ref(false);
const actions = {
  confirm: function confirmSelected() {
    overlayShow.value = true;
    selectGame(bizId.value)
      .then(() => {
        success.value = true;
        getList(event.value);
        overlayShow.value = false;
      })
      .catch((err) => {
        overlayShow.value = false;
        Snackbar.error(err.response.data.message);
      });
  },
  cancel: () => Snackbar.info("再考虑一下吧~"),
  close: () => Snackbar.info("再考虑一下吧~"),
};
async function handleEnroll(id: string) {
  bizId.value = id;
  actions[await Dialog("是否确认选择该场次？")]();
}
</script>

<style scoped lang="less">
@bg-color:#3a7afe;
.content {
  padding: 20px 10px;
  position: relative;
}

.noData {
  margin-top: 5px;
  text-align: center;
}

.main-wrap {
  height: calc(98vh - 54px - 54px - 100px);
  overflow-y: auto;

}

.eclipse {
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.box {
  box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  height: 120px;
  padding: 10px;
  border: 1px solid @borderColor;
  margin: 10px 0;
  border-radius: 5px;

  .left-item {
    margin: 5px;
    flex: 1;

    .ava-box {
      display: flex;
      justify-content: center;
      align-items: end;
      height: 30px;
      margin-bottom: 20px;

      span {
        border: 1px solid @lightColor;
        border-radius: 7px;
        color: #fff;
        text-overflow: ellipsis;
        width: 60px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        font-size: 13px;
        background-color: @lightColor;
        padding: 5px;
      }
    }

    .selected-box {
      display: flex;
      justify-content: center;
      align-items: end;
    }
  }

  .right-item {
    margin: 5px 10px;
    flex: 3;

    h4 {
      color: @darkTextColor;
    }

    .bottom-wrap {
      margin: 10px 0;
      margin: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .time-wrap {
        font-size: bold;
        color: @darkColor;
      }
    }
  }
}

.page-wrap {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

.overlay-content {
  padding: 20px 24px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;

  li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    list-style: none;
    margin: 1px;
    transition: 0.3s;

    &:nth-child(1) {
      transform: translateY(5px);
      animation: moveSide 1s infinite;
    }

    &:nth-child(2) {
      transform: translateY(-5px);
      animation: moveMiddle 1s infinite;
    }

    &:nth-child(3) {
      transform: translateY(5px);
      animation: moveSide 1s infinite;
    }
  }
}

@keyframes moveSide {
  0% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(5px);
  }
}

@keyframes moveMiddle {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(-5px);
  }
}
.move-top-btn{
  position: absolute;
  right:12px;
  bottom:36px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  outline: none;
  border:none;
  background-color: @bg-color;
  color:#fff;
  font-weight: bold;
  z-index: 999;
  &:active{
    background-color: lighten(@bg-color,10%);
  }
}
</style>
